<template>
  <view class="detail">
    <view class="detail-like" v-if="flag == -1" @click="gettarget(detaildata.id, 1)">收藏</view>
    <view class="detail-like1" v-if="flag == 1" @click="gettarget(detaildata.id, -1)">取消收藏</view>
    <view class="detail-title">{{ detaildata.title }}</view>
    <WzsAudio ref="wzsAudioRef" v-if="detaildata.resType == 2 && isWzsAudio" :music="detaildata.resContent"
      :image="detaildata.coverImg" :title="detaildata.title"></WzsAudio>
    <video loop v-if="detaildata.resType == 3" :src="detaildata.resContent"></video>
    <image :src="detaildata.resContent" v-if="detaildata.resType == 1" mode="scaleToFill" />
    <rich-text :nodes="detaildata.content" class="custom-rich-text" selectable="true" base64="true" />
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onShow, onReady, onUnload, onHide } from "@dcloudio/uni-app"
import { lessonSchedule } from '@/api/user'
import WzsAudio from '@/components/WZS-Audio/WZS-Audio.vue'
import { target } from '@/api/user'
const detaildata: any = ref({})
const id = ref<any>()
const flag = ref(1)
const isWzsAudio = ref(false)
const wzsAudioRef = ref<any>(null)
onLoad(async (options: any) => {
  id.value = options.id
  getdetail(id.value)
})
onShow(() => {
  if (detaildata.value.resType == 2) {
    wzsAudioRef.value.audioPause()
  }
})
onHide(() => {

})
const getdetail = async (id: any) => {
  let res: any = await lessonSchedule(id)
  if (res.code == 0) {
    detaildata.value = res.data
    flag.value = detaildata.value.favoritesStatus
    //先清除原有样式
    let newhtml = detaildata.value.content.replace(/<img[^>]*>/gi, function (match, capture) {
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      return match;
    });
    //再设置新的样式  
    detaildata.value.content = newhtml.replace(/\<img/gi, '<img class="custom-img"');
    isWzsAudio.value = true
  }
}
const gettarget = async (id: Number, type: any) => {
  let res: any = await target(id, type)
  if (res.code == 0) {
    flag.value = type
  }
}
onUnload(() => {
  // isWzsAudio.value = false
  if (detaildata.value.resType == 2) {
    // wzsAudioRef.value.updateMessage()
    wzsAudioRef.value.stopAudio()
  }
})

</script>

<style lang="scss">
.detail {
  margin: 30rpx 34rpx;
  padding-bottom: 50rpx;

  video {
    width: 100%;
    margin-bottom: 50rpx;
  }

  image {
    width: 100%;
    border-radius: 16rpx;
  }

  .custom-rich-text {
    font-weight: 400;
    font-size: 30rpx;
    color: #6C6C6C;
    line-height: 52rpx;
  }

  .custom-img {
    max-width: 100%;
    height: auto;
    text-align: center;
    border-radius: 16rpx;
  }

  &-like {
    color: #FFA97F;
    text-align: right;
  }

  &-like1 {
    color: #B2B2B2;
    text-align: right;
  }

  &-title {
    text-align: center;
    font-weight: 500;
    font-size: 34rpx;
    color: #353535;
    line-height: 40rpx;
    padding: 10rpx 0 26rpx;
  }
}
</style>